﻿/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("DevIsMagic.ExtendedListBox");

DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior = function(element) {
    DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior.initializeBase(this, [element]);
    this._moveToSelectedImageUrl = null;
    this._moveToUnselectedImageUrl = null;
    this._moveAllToSelectedImageUrl = null;
    this._moveAllToUnselectedImageUrl = null;
    this._containerCssClass = null;
    this._catalogValuesLabel = null;
    this._selectedValuesLabel = null;
}

DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior.prototype = {
	initialize: function() {

		DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior.callBaseMethod(this, 'initialize');

		var el = this.get_element();
		// Add custom initialization here
		this.divContainer = null;
		this.lstCatalogValues = null;
		this.lstSelectedValues = null;
		this.imgMoveToSelected = null;
		this.imgMoveToUnselected = null;
		this.imgMoveAllToSelected = null;
		this.imgMoveAllToUnselected = null;

		// hide listbox
		el.style.display = "none";
		//el.style.border = "solid 1px red";

		var template = "\
        <div>\
            <label for='{0}_catalogValues'>\
                {5}</label>\
            <select multiple='multiple' id='{0}_catalogValues'></select>\
        </div>\
        <div class='buttons'>\
            <img id='{0}_imgMoveAllToSelected' title='Move all to selected' alt='Move all to selected' src='{1}' />\
            <img id='{0}_imgMoveToSelected' title='Move to selected' alt='Move to selected' src='{2}' />\
            <img id='{0}_imgMoveToUnselected' title='Move to unselected' alt='Move to unselected' src='{3}' />\
            <img id='{0}_imgMoveAllToUnselected' title='Move all to unselected' alt='Move all to unselected' src='{4}' />\
        </div>\
        <div>\
            <label for='{0}_selectedValues'>\
                {6}</label>\
            <select multiple='multiple' id='{0}_selectedValues'></select>\
        </div>\
";

		var html = String.format(
            template,
            el.id,
            this.get_moveAllToSelectedImageUrl(),
            this.get_moveToSelectedImageUrl(),
            this.get_moveToUnselectedImageUrl(),
            this.get_moveAllToUnselectedImageUrl(),
            this.get_catalogValuesLabel(),
            this.get_selectedValuesLabel()
            );

		this.divContainer = document.createElement("div");
		this.divContainer.innerHTML = html;
		this.divContainer.className = this.get_containerCssClass();

		el.parentNode.insertBefore(this.divContainer, el);

		this.imgMoveAllToSelected = document.getElementById(
            el.id + "_imgMoveAllToSelected"
            );
		this.imgMoveToSelected = document.getElementById(
            el.id + "_imgMoveToSelected"
            );
		this.imgMoveToUnselected = document.getElementById(
            el.id + "_imgMoveToUnselected"
            );
		this.imgMoveAllToUnselected = document.getElementById(
            el.id + "_imgMoveAllToUnselected"
            );

		this.lstCatalogValues = document.getElementById(
            el.id + "_catalogValues"
            );
		this.lstSelectedValues = document.getElementById(
            el.id + "_selectedValues"
            );


		// Fill new listboxes
		this.CopyValues();

		$addHandler(el, 'change', Function.createDelegate(this, this._onchange));

		// Not Working for an unknown reason

		$addHandler(this.lstCatalogValues, 'dblclick', Function.createDelegate(this, function(evt) {
			if (evt.target) {
				this.SetSelected(evt.target.value);
				this.CopyValues();
				this.FireElementOnChange();
			}
		}));
		$addHandler(this.lstSelectedValues, 'dblclick', Function.createDelegate(this, function(evt) {
			if (evt.target) {
				this.SetUnselected(evt.target.value);
				this.CopyValues();
				this.FireElementOnChange();
			}
		}));
		$addHandler(this.imgMoveToSelected, 'click', Function.createDelegate(this, this.MoveToSelected));
		$addHandler(this.imgMoveAllToSelected, 'click', Function.createDelegate(this, this.MoveAllToSelected));
		$addHandler(this.imgMoveToUnselected, 'click', Function.createDelegate(this, this.MoveToUnselected));
		$addHandler(this.imgMoveAllToUnselected, 'click', Function.createDelegate(this, this.MoveAllToUnselected));
	},
	dispose: function() {
		//Add custom dispose actions here
		$clearHandlers(this.get_element());
		DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior.callBaseMethod(this, 'dispose');
	},
	/* Properties get/set */
	get_moveToSelectedImageUrl: function() {
		return this._moveToSelectedImageUrl;
	},
	get_moveToUnselectedImageUrl: function() {
		return this._moveToUnselectedImageUrl;
	},
	get_moveAllToSelectedImageUrl: function() {
		return this._moveAllToSelectedImageUrl;
	},
	get_moveAllToUnselectedImageUrl: function() {
		return this._moveAllToUnselectedImageUrl;
	},
	get_containerCssClass: function() {
		return this._containerCssClass;
	},
	get_catalogValuesLabel: function() {
		return this._catalogValuesLabel;
	},
	get_selectedValuesLabel: function() {
		return this._selectedValuesLabel;
	},
	set_moveToSelectedImageUrl: function(value) {
		if (this._moveToSelectedImageUrl !== value) {
			this._moveToSelectedImageUrl = value;
			this.raisePropertyChanged('moveToSelectedImageUrl');
		}
	},
	set_moveToUnselectedImageUrl: function(value) {
		if (this._moveToUnselectedImageUrl !== value) {
			this._moveToUnselectedImageUrl = value;
			this.raisePropertyChanged('moveToUnselectedImageUrl');
		}
	},
	set_moveAllToSelectedImageUrl: function(value) {
		if (this._moveAllToSelectedImageUrl !== value) {
			this._moveAllToSelectedImageUrl = value;
			this.raisePropertyChanged('moveAllToSelectedImageUrl');
		}
	},
	set_moveAllToUnselectedImageUrl: function(value) {
		if (this._moveAllToUnselectedImageUrl !== value) {
			this._moveAllToUnselectedImageUrl = value;
			this.raisePropertyChanged('moveAllToUnselectedImageUrl');
		}
	},
	set_containerCssClass: function(value) {
		if (this._containerCssClass !== value) {
			this._containerCssClass = value;
			this.raisePropertyChanged('containerCssClass');
		}
	},
	set_catalogValuesLabel: function(value) {
		if (this._catalogValuesLabel !== value) {
			this._catalogValuesLabel = value;
			this.raisePropertyChanged('catalogValuesLabel');
		}
	},
	set_selectedValuesLabel: function(value) {
		if (this._selectedValuesLabel !== value) {
			this._selectedValuesLabel = value;
			this.raisePropertyChanged('selectedValuesLabel');
		}
	},
	/* Listbox's change handler */
	_onchange: function(e) {
		this.CopyValues();
	},
	/* Methods to do the job */
	CopyValues: function() {
		var i;
		var listCat = this.lstCatalogValues;
		var listSel = this.lstSelectedValues;

		this.ClearSelect(listCat);
		this.ClearSelect(listSel);

		var el = this.get_element();
		for (i = 0; i < el.options.length; i++) {
			var option = el.options[i];
			/*var newOption = document.createElement("option");
			newOption.text = option.text;
			newOption.value = option.value;*/
			var newOption = option.cloneNode(true);
			if (option.selected) {
				listSel.appendChild(newOption);
			}
			else {
				listCat.appendChild(newOption);
			}
		}
	},
	ClearSelect: function(list) {
		//debugger;
		while (list.options.length > 0) {
			list.remove(list.options[0]);
		}
	},
	SetSelected: function(value) {
		var el = this.get_element();
		var i;
		for (i = 0; i < el.options.length; i++) {
			if (el.options[i].value == value) {
				el.options[i].selected = true;
			}
		}
	},
	SetUnselected: function(value) {
		var el = this.get_element();
		var i;
		for (i = 0; i < el.options.length; i++) {
			if (el.options[i].value == value) {
				el.options[i].selected = false;
			}
		}
	},
	MoveToSelected: function() {
		var temp = new Array();
		var i;
		for (i = 0; i < this.lstCatalogValues.options.length; i++) {
			if (this.lstCatalogValues.options[i].selected) {
				temp.push(this.lstCatalogValues.options[i].value);
			}
		}

		for (i = 0; i < temp.length; i++) {
			this.SetSelected(temp[i]);
		}
		this.CopyValues();
		var el = this.get_element();
		this.FireElementOnChange();
	},
	MoveAllToSelected: function() {
		var el = this.get_element();
		var i;
		for (i = 0; i < el.options.length; i++) {
			el.options[i].selected = true;
		}
		this.CopyValues();
		this.FireElementOnChange();
	},
	MoveToUnselected: function() {
		var temp = new Array();
		var i;
		for (i = 0; i < this.lstSelectedValues.options.length; i++) {
			if (this.lstSelectedValues.options[i].selected) {
				temp.push(this.lstSelectedValues.options[i].value);
			}
		}

		for (i = 0; i < temp.length; i++) {
			this.SetUnselected(temp[i]);
		}
		this.CopyValues();
		var el = this.get_element();
		this.FireElementOnChange();
	},
	MoveAllToUnselected: function() {
		var el = this.get_element();
		var i;
		for (i = 0; i < el.options.length; i++) {
			el.options[i].selected = false;
		}
		this.CopyValues();
		this.FireElementOnChange();
	},
	FireElementOnChange: function() {
		var el = this.get_element();
		if (document.all) {
			el.fireEvent("onchange");
		} else {
			var changeEvent = window.document.createEvent("MouseEvents");
			changeEvent.initEvent("change", false, true);
			el.dispatchEvent(changeEvent);
		}
	}
}

DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior.registerClass('DevIsMagic.ExtendedListBox.ListBoxExtenderBehavior', Sys.UI.Behavior);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();